﻿<div
    bsModal
    #modal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modal"
    (onShown)="shown()"
    aria-hidden="true"
    [config]="{ backdrop: 'static', keyboard: !saving }"
>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <span>成员列表</span>
                </h5>
                <button
                    type="button"
                    class="close"
                    (click)="close()"
                    [attr.aria-label]="l('Close')"
                    [disabled]="saving"
                >
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form novalidate (ngSubmit)="refreshTable()" autocomplete="off">
                    <div class="input-group margin-bottom-10">
                        <input
                            autoFocus
                            [(ngModel)]="filterText"
                            name="filterText"
                            class="form-control"
                            placeholder="{{ 'SearchWithThreeDot' | localize }}"
                            type="text"
                        />
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="submit">
                                <i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i>
                            </button>
                        </span>
                    </div>

                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                        <p-table
                            #dataTable
                            (onLazyLoad)="getRecordsIfNeeds($event)"
                            [value]="primengTableHelper.records"
                            rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                            [paginator]="false"
                            [lazy]="true"
                            [responsive]="primengTableHelper.isResponsive"
                        >
                            <ng-template pTemplate="header">
                                <tr>
                                    <th>移除用户</th>
                                    <th>
                                        {{ 'Name' | localize }}
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td>
                                        <button
                                            class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill"
                                            (click)="removeMember(record)"
                                        >
                                            <i class="fa fa-times"></i>
                                        </button>
                                    </td>
                                    <td>
                                        <span class="ui-column-title">{{ 'Name' | localize }}</span>
                                        {{ record.name }}
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                            {{ 'NoData' | localize }}
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator
                                [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                #paginator
                                (onPageChange)="getRecordsIfNeeds($event)"
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                            >
                            </p-paginator>
                            <span class="total-records-count">
                                {{ 'TotalRecordsCount' | localize: primengTableHelper.totalRecordsCount }}
                            </span>
                        </div>
                    </div>
                    <!--<Primeng-TurboTable-End>-->
                </form>
            </div>
        </div>
    </div>
</div>
